<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div #app>
        <a href="#/home">主页</a>
        <a href="#/yemian1">页面1</a>
        <a href="#/yemian2">页面2</a>
        <a href="#/yemian3">页面3</a>
        <a href="#/yemian4">页面4</a>
    </div>
    <script>
        let state = { 'page_id': 1, 'user_id': 5 };
        let title = "";
        let url = 'gaobudong.html';
        history.pushState(state, title, url);
        window.onpopstate = function (event) {
            alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
        };
        //绑定事件处理函数. 
        history.pushState({ page: 1 }, "title 1", "?page=1");    //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
        history.pushState({ page: 2 }, "title 2", "?page=2");    //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
        history.replaceState({ page: 3 }, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
        history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
        history.back(); // 弹出 "location: http://example.com/example.html, state: null
        history.go(2);  // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}
    </script>
</body>

</html>